<template>
	<view class="player-page container">
	  <view class="bg_img" v-bind:style="{background:'url(' + playing.singerAvatar + ') center;background-size:125px'}"></view>
	  <view class="player__circle-progress__container"
		v-bind:class="[playState.isPlaying ? 'playing' : '']"
		@click="handleClickCover()">
		<image class="player__circle-progress__content" :src="playing.cover" />
		<view class="player__circle-progress__left-wrapper">
		  <view class="player__circle-progress__left-inner-circle"
			v-bind:style="{transform:'rotate(' + playState.leftRotate + 'deg)'}">
		  </view>
		</view>
		<view class="player__circle-progress__right-wrapper">
		  <view class="player__circle-progress__right-inner-circle"
			v-bind:style="{transform:'rotate(' + playState.rightRotate + 'deg)'}">
		  </view>
		</view>
	  </view>
	  <view class="player-song-info">
		<text class="player-song-info__song-title">{{playing.title}}</text>
		<text class="player-song-info__artist">{{playing.artist}}</text>
	  </view>
	  
	  <view class="song-lyric" v-if="playing.lyric && playing.lyric.length>0 ">
		  <text>{{playing.preLyric}}</text>
		  <text class="song-lyric-curr" v-bind:style="{color: bg_color}">{{playing.curLyric}}</text>
		  <text>{{playing.afterLyric}}</text>
	  </view>
	  <view class="song-lyric" v-else>
		  <text class="song-lyric-curr">暂无歌词</text>
	  </view>
	  
	  <!--bottom-->
	  <view class="player__user-actions">
		<button class="player__user-actions__btn-icon-trash"
		  catchtap="handleNeverPlay">
		</button>
		<button class="player__user-actions__btn-icon-heart"
			v-bind:class="[playing.like ? 'player__user-actions__btn-icon-heart--active' : '']"
			catchtap="handleToggleHeart">
		</button>
		<button class="player__user-actions__btn-icon-next"
		  @click="handlePlayNextSong()">
		</button>
	  </view>
	</view>

</template>

<script>
	var innerAudioContext;
	export default {
		data() {
			return {
				userInfo:{
					username:'bukaa',
					authorized: false,
					avatar:'../../static/pcenter/face.jpeg',
				},
				doubanAuth:{},
				doubanRadio:{
					groups:[]
				},
				playing: this.$fm.playing,
				playState:this.$fm.playState,
				channel: this.$fm.channel,
				leftRotate: 225,
				rightRotate: 225,
				playintProcessListeningerId: null,
				bg_color: '#ffffff',
			};
		},
		onShow() {
			var that = this;
			//监听播放进度
			var ii = 0;
			that.playintProcessListeningerId = setInterval(function(){
					that.playState = that.$fm.playState;
					that.playing = that.$fm.playing;
			}, 100);
			
		},
		onLoad() {
			this.init();
		},
		onUnload() {
			var that = this;
			if(that.playintProcessListeningerId){
				clearInterval(that.playintProcessListeningerId);
			}
		},
		methods:{
			init() {
				var that = this;
				uni.setNavigationBarTitle({
					title:this.$fm.channel.name || 'fm',
					success: () => {
						if(this.$fm.channel && this.$fm.channel.style){
							var style = this.$fm.channel.style;
							var bg_color = style.bg_color.replace("0x", "#");
							that.bg_color = bg_color;
							uni.setNavigationBarColor({
								backgroundColor: bg_color,
								frontColor: "#ffffff",
							})
						}
					}
				})
				var that = this;
				//监听播放进度
				if(!that.playintProcessListeningerId){
					that.playintProcessListeningerId = setInterval(function(){
							that.playState = that.$fm.playState;
							that.playing = that.$fm.playing;
					}, 100);
				}
				//初始化播放器对象
				if(!this.$fm.innerAudioContext)
					this.$fm.innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext = this.$fm.innerAudioContext;
			},
			/**
			 * 获取播放歌曲列表
			 * channel: 当前channel
			 * play: 是否立即播放
			 */
			getPlayList(channel){
				var that = this;
				that.channel = channel;
				uni.request({
					url:'https://bukaa.cn/api-cms/fm/douban/playlist/' + channel.id,					
					method:'GET',
					success: (res) => {
						if(res.statusCode === 200 && res.data.data){
							that.$fm.songs = res.data.data.song;
							that.$fm.songs = that.$fm.songs.filter(function(s){
								return s['url'] && s['url'].indexOf('.mp4') >0;
							});
							if(that.$fm.songs.length >0){
								that.playing = {
									channelName:channel['name'],
									cover:channel['cover'],
								},
								that.doubanRadio.active = channel.id;
								that.play(this.$fm.songs.pop());
							}else{
								uni.navigateBack({
									animationDuration:100
								})
							}
						}
					}
				})
			},
			/**
			 * 播放
			 * song: 当前歌曲
			 */
			play(song){
				if(!song|| !song.url)
					return;
				var that = this;
				that.playState.rightRotate = 225;
				that.playState.leftRotate = 225;
				//更新当前歌曲信息
				that.playing.title=song['title'];
				that.playing.artist=song['artist'];
				that.playing.cover=song['picture'];
				that.playing.like=song['like'];
				that.playing.singerAvatar = song['singers'] ? song['singers'][0]['avatar'] : '';
				
				that.playing.audioDuration = 0;
				that.playing.lyricIdx = 0;
				that.playing.curLyric = "";
				that.playing.preLyric = "";
				that.playing.afterLyric = "";
				//设置src
				innerAudioContext.src = song.url;
				//运行一次
				innerAudioContext.play();
				//修改状态
				that.playState.isPlaying = true;
				that.$fm.playState = that.playState;
				//innerAudioContext.pause();
				that.getLyric(song);
				innerAudioContext.onCanplay(() => {
					//初始化duration
					that.playing.audioDuration = innerAudioContext.duration
					setTimeout(function() {
						//延时获取音频真正的duration
						var duration = innerAudioContext.duration;
						var min = parseInt(duration / 60);
						var sec = parseInt(duration % 60);
						if (min.toString().length == 1) {
							min = `0${min}`;
						}
						if (sec.toString().length == 1) {
							sec = `0${sec}`;
						}
						//设置真实时长
						that.playing.audioDuration = innerAudioContext.duration
						// t.showTime2 = `${min}:${sec}`
					}, 100);
				});
			},
			getLyric(song){
				var that = this;
				that.$fm.playing.lyric = null;
				that.playing.lyric = null;
				
				var url =  "https://bukaa.cn/api-cms/fm/douban/lyric";
				var data = {"sid": song.sid, "ssid": song.ssid};
				uni.request({
					url:url,
					data: data,
					success: (res) => {
						if(res.statusCode === 200 && res.data.data){
							var lyric = res.data.data.lyric;
							//拆分成单个句子
							var lys = lyric.split("[");
							//生成K，V
							var lyricArr = [];
							if(lys && lys.length > 0){
								lys.forEach(function(ly){
									if(ly && ly.indexOf("]")>0){
										var t = ly.substring(0, ly.indexOf("]"));
										var val = ly.substring(ly.indexOf("]")+1).replace("\n","").trim();
										if(val && val.length > 0)
											lyricArr.push({key: t.substring(0,t.indexOf(":")) * 60 + parseFloat(t.substring(t.indexOf(":")+1)), value: ly.substring(ly.indexOf("]")+1)});
									}	
								})
								lyricArr.sort(function(e1, e2){return e1.key - e2.key});
								that.playing.lyric = lyricArr;
								that.$fm.playing.lyric = lyricArr;
							}
						}
					}
				})
			},
			showLyric(lyric){
				
			},
			//播放下一首
			handlePlayNextSong(){
				var that = this;
				console.log(that.$fm.songs);
				if(that.$fm.songs.length == 1){
					that.getPlayList(that.channel);
					that.play(that.$fm.songs.pop());
				}else if(that.$fm.songs.length == 0){
					that.getPlayList(that.channel);
					uni.showLoading({
						title:'loading...'
					})
					setTimeout(function(){
						uni.hideLoading();
						that.handlePlayNextSong();
					}, 1000)
				}else {
					that.play(that.$fm.songs.pop());
				}
			},
			//点击cover（暂停或继续）
			handleClickCover() {
				if(this.playState.isPlaying){
					innerAudioContext.pause();
				}else{
					innerAudioContext.play();
				}
				this.playState.isPlaying = !this.playState.isPlaying;
			},
		}
	}
</script>

<style>
@import url("../../static/css/fm.css");
.circle-img {
  border-radius: 50%;
}
.text-overfolw {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.all-center {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}
.override-btn {
  margin: 0 0 0 12px !important;
  padding: 0 !important;
  box-sizing: border-box;
  background: transparent;
}
.override-btn::after {
  width: inherit;
  position: relative;
  top: auto;
  left: auto;
  border: none;
  transform: scale(1);
  border-radius: 0;
}
.player-page {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bg_img{
	width: 100%;
	height: 100%;
	position: absolute;
	opacity: 0.02;
}
.player__circle-progress__container {
  margin-top: 120rpx;
  width: 476rpx;
  height: 476rpx;
  border-radius: 50%;
  position: relative;
}
.player__circle-progress__container::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 8rpx solid #e1e6e3;
  border-radius: 50%;
  box-sizing: border-box;
}
.player__circle-progress__container::after {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  border-radius: 50%;
  width: 460rpx;
  height: 460rpx;
  content: "\E906";
  display: block;
  font-size: 32px;
  font-family: 'icomoon';
  color: #4fb974;
  background-color: rgba(255, 255, 255, 0.9);
  text-align: center;
  line-height: 460rpx;
}
.player__circle-progress__container.playing::after {
  display: none;
}
.player__circle-progress__content {
  width: 452rpx;
  height: 452rpx;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.player__circle-progress__left-wrapper {
  width: 50%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
}
.player__circle-progress__right-wrapper {
  width: 50%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  right: 0;
}
.player__circle-progress__left-inner-circle {
  width: 200%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  border: 8rpx solid transparent;
  transition: transform .3s linear;
  box-sizing: border-box;
  border-left-color: #4fb974;
  border-bottom-color: #4fb974;
  left: 0;
  top: 0;
  transition-delay: .3s;
  transform: rotate(225deg);
}
.player__circle-progress__right-inner-circle {
  width: 200%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  border: 8rpx solid transparent;
  transition: transform .3s linear;
  box-sizing: border-box;
  border-right-color: #4fb974;
  border-top-color: #4fb974;
  top: 0;
  right: 0;
  transform: rotate(225deg);
}
.player-song-info {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 0.4;
}
.song-lyric{
  flex-grow: 0.5;
  color: #8f8e94;
  font-size: 16px;
  text-align: center;
  line-height: 28px;
}
.song-lyric-curr{
	font-size: 21px;
	display: block;
}
.player-song-info__song-title {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  line-height: 60rpx;
  font-size: 22px;
  color: #616161;
  max-width: 600rpx;
}
.player-song-info__artist {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin-top: 12px;
  max-width: 600rpx;
  font-size: 12px;
  color: #acacab;
}
.player__user-actions {
  display: flex;
  align-items: center;
  width: 460rpx;
  justify-content: space-between;
  margin-bottom: 140rpx;
}
.player__user-actions__btn-icon-trash {
  margin: 0 0 0 12px !important;
  padding: 0 !important;
  box-sizing: border-box;
  background: transparent;
  width: 32px;
  height: 32px;
  font-size: 32px;
  color: #616161;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-size: 32px 32px;
  background: url("") no-repeat !important;
}
.player__user-actions__btn-icon-trash::after {
  width: inherit;
  position: relative;
  top: auto;
  left: auto;
  border: none;
  transform: scale(1);
  border-radius: 0;
}
.player__user-actions__btn-icon-trash.button-hover {
  opacity: .75;
}
.player__user-actions__btn-icon-heart {
  margin: 0 0 0 12px !important;
  padding: 0 !important;
  box-sizing: border-box;
  background: transparent;
  width: 32px;
  height: 32px;
  font-size: 32px;
  color: #616161;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-size: 32px 32px;
  background: url("") no-repeat !important;
}
.player__user-actions__btn-icon-heart::after {
  width: inherit;
  position: relative;
  top: auto;
  left: auto;
  border: none;
  transform: scale(1);
  border-radius: 0;
}
.player__user-actions__btn-icon-heart.button-hover {
  opacity: .75;
}
.player__user-actions__btn-icon-heart--active {
  margin: 0 0 0 12px !important;
  padding: 0 !important;
  box-sizing: border-box;
  background: transparent;
  width: 32px;
  height: 32px;
  font-size: 32px;
  color: #616161;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-size: 32px 32px;
  background: url("") no-repeat !important;
}
.player__user-actions__btn-icon-heart--active::after {
  width: inherit;
  position: relative;
  top: auto;
  left: auto;
  border: none;
  transform: scale(1);
  border-radius: 0;
}
.player__user-actions__btn-icon-heart--active.button-hover {
  opacity: .75;
}
.player__user-actions__btn-icon-next {
  margin: 0 0 0 12px !important;
  padding: 0 !important;
  box-sizing: border-box;
  background: transparent;
  width: 32px;
  height: 32px;
  font-size: 32px;
  color: #616161;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-size: 32px 32px;
  background: url("") no-repeat !important;
}
.player__user-actions__btn-icon-next::after {
  width: inherit;
  position: relative;
  top: auto;
  left: auto;
  border: none;
  transform: scale(1);
  border-radius: 0;
}
.player__user-actions__btn-icon-next.button-hover {
  opacity: .75;
}

</style>
